<template>
<div>
  <el-row class="header">
      <el-col :span="12">
        <div class="title">用户列表</div>
      </el-col>
      <el-col :span="12">
        <div class="search">
          <el-input placeholder="请输入用户名" class="input" v-model="keywords">
            <el-button slot="append" class="search-btn" @click="searchUser">搜 索</el-button>
          </el-input>
        </div>
      </el-col>
    </el-row>
  <el-row class="tab-wrap">
    <div class="flex">
      <div
        :class="curIndex === 1 ? 'active-nav nav-item-visitors' : 'nav-item-visitors'"
        @click="changeTab(1)"
      >已关注</div>
      <div
        :class="curIndex === 2 ? 'active-nav nav-item-visitors' : 'nav-item-visitors'"
        @click="changeTab(2)"
      >黑名单</div>
    </div>
    <!-- 已关注 -->
    <div class="table-wrap" v-if="curIndex === 1" >
      <div class="flex flex-center flex-between">
        <el-select
          v-model="value"
          placeholder="请选择"
          @change="changeTag"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.utTagName"
            :value="item.userTagId"
          >
          </el-option>
        </el-select>
        <div class="flex flex-one">
          <div
            class="fontC"
            style="margin-left:32px"
            @click="reName"
          >重命名</div>
          <div
            class="fontC"
            style="margin-left:20px"
            @click="del"

          >删除

          </div>
          <el-dialog
            :modal-append-to-body='false'
            title="提示"
            :visible.sync="showDelPop"
            width="280px"
            height="200px"
            style="border-radius: 16px"
            center
          >
            <span>删除标签后该标签下的用户将失去该标签属性，是否确定删除?</span>
            <div
              slot="footer"
              class="dialog-footer"
            >
              <el-button
                size="small"
                @click="showDelPop = false"
              >取 消</el-button>
              <el-button
                size="small"
                type="primary"
                @click="confirmDel()"
              >确 定</el-button>
            </div>
          </el-dialog>
        </div>
        <el-button
          style="margin:10px 0 30px 0;background: #015DFF;"
          type="primary"
          icon="el-icon-plus"
          @click="addCategory"
        >新建标签</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >

        <el-table-column
          type="selection"
          width="55"
        >
        </el-table-column>

        <el-table-column width="180">
          <template
            slot="header"
            slot-scope="scope"
          >
            <div class="flex">
              <el-button
                type="info"
                size="small"
                plain
                @click="pushTag"
              >打标签</el-button>
              <el-button
                type="info"
                size="small"
                plain
                @click="blacklist(2)"
              >加入黑名单</el-button>
            </div>
          </template>
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>

        </el-table-column>

        <el-table-column
          prop=""
          label=""
        >
          <template slot-scope="scope">
            <el-popover
              popover-class="popover-wrap"
              trigger="hover"
              placement="top"
              width="360px"
            >
              <div class=" name-wrapper popover-wrap">
                <div class="flex">
                  <!-- <img
                    :src="scope.row.vuUserImage"
                    alt=""
                  > -->
                  <div style="margin-left:20px">
                    <p class="title">{{ scope.row.vuName }}</p>
                    <p class="info">备注: {{ scope.row.vuRemarkName }}</p>
                    <p class="info">标签: {{ scope.row.userTag != null ? scope.row.userTag.utTagName : "" }}</p>
                    <p class="info">电话: {{ scope.row.vuPhone }}</p>
                  </div>
                </div>
                <div class="flex flex-between flex-center card-footer">
                  {{scope.row.vuFollowDate}}通过“{{scope.row.vuFollowSource}}”关注
                  <el-button
                    type="info"
                    plain
                    size="small"
                    @click="blacklist(1,scope.row)"
                  >加入黑名单</el-button>
                </div>
              </div>
              <div
                slot="reference"
                class=" flex flex-center"
              >
                <img
                  style="width:30px;height:30px;margin-right:26px;"
                  src="../../assets/image/add-icon.png"
                  alt=""
                >
                <div
                  class="fontB"
                  style="margin-right:10px;"
                >{{scope.row.vuName}}</div>
                <el-tag
                  effect="plain"
                  size="mini"
                  v-if="scope.row.userTag  != null"
                >{{ scope.row.userTag.utTagName }}</el-tag>
                <el-tag
                  effect="plain"
                  size="mini"
                  type="info"
                  v-if="scope.row.userTag  == null"
                >无标签</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label=""
          width="300"
        >
          <template slot-scope="scope">
            <div
              style="color: #015DFF;"
              @click="editRemark(scope.row)"
            >修改备注</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-content" style="margin-top:10px">
        <el-pagination
            background
            :hide-on-single-page="false"
            :page-size="10"
            :total="tablePageTotal"
            @current-change="changePage1"
            layout="prev, pager, next"
          >
          </el-pagination>
        </div>
    </div>
    <!-- 黑名单 -->
    <div
      class="table-wrap"
      v-if="curIndex === 2"
    >
      <div class="flex flex-end">
        <el-button
          style="margin:10px 0 30px 0;background: #015DFF;"
          type="primary"
          icon="el-icon-plus"
          @click="addCategory"
        >新建标签</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData2"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        >
        </el-table-column>

        <el-table-column
          label=""
          width="180"
        >
          <template
            slot="header"
            slot-scope="scope"
          >
            <div class="flex">
              <el-button
                type="info"
                size="small"
                plain
                @click="removedBlacklist(2,scope.row)"
              >移出黑名单</el-button>
            </div>
          </template>
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>

        </el-table-column>
        <el-table-column
          prop=""
          label=""
        >
          <template slot-scope="scope">
            <el-popover
              popover-class="popover"
              trigger="hover"
              placement="top"
            >
              <div class=" name-wrapper">
                <div class="flex">
                  <!-- 头像 -->
                  <img
                    :src="scope.row.vuUserImage"
                    alt=""
                  >
                  <!-- 用户信息 -->
                  <div style="margin-left:20px">
                    <p class="title">{{ scope.row.visitorUser.vuName }}</p>
                    <p class="info">备注: {{ scope.row.visitorUser.vuRemarkName }}</p>
                    <p class="info">标签: {{ scope.row.visitorUser.userTag != null ? scope.row.visitorUser.userTag.utTagName : "" }}</p>
                    <p class="info">电话: {{ scope.row.visitorUser.vuPhone }}</p>
                  </div>
                </div>
                <div class="flex flex-between flex-center card-footer">
                  2021-03-10通过“{{scope.row.visitorUser.vuFollowSource}}”关注
                  <el-button
                    type="info"
                    plain
                    size="small"
                    @click="removedBlacklist(1,scope.row)"
                  >移出黑名单</el-button>
                </div>
              </div>
              <div
                slot="reference"
                class=" flex flex-center"
              >
                <img
                  style="width:30px;height:30px;margin-right:26px;"
                  src="../../assets/image/add-icon.png"
                  alt=""
                >
                <div
                  class="fontB"
                  style="margin-right:10px;"
                >{{scope.row.visitorUser.vuName}}</div>
                <el-tag
                  effect="plain"
                  size="mini"
                  v-if="scope.row.visitorUser.userTag  != null"
                >{{ scope.row.visitorUser.userTag.utTagName }}</el-tag>
                <el-tag
                  effect="plain"
                  size="mini"
                  type="info"
                  v-if="scope.row.visitorUser.userTag  == null"
                >无标签</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label=""
          width="300"
        >
          <template slot-scope="scope">
            <div
              style="color: #015DFF;"
              @click="editRemark(scope.row)"
            >修改备注</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-content" style="margin-top:10px">
        <el-pagination
            background
            :hide-on-single-page="false"
            :page-size="10"
            :total="tablePageTotal2"
            @current-change="changePage2"
            layout="prev, pager, next"
          >
          </el-pagination>
        </div>
    </div>
    <PushTagPop
      ref="PushTagPop"
      :tagList="options"
      @pushTags="onPushTag"
      @addTags="onAddTag"
      @closePop="onClosePop"
      :show="showPop"
    ></PushTagPop>
  </el-row>

  </el-row>
</div>
</template>

<script>
import Sortable from 'sortablejs'
import PushTagPop from './components/PushTagPop'
import utils from '@/utils/index'
import {
  addVisitorser,
  getVisitorserList,
  updateVisitorser,
  deleteVisitorser,
  getUsertag,
  addUsertag,
  updateUsertag,
  delUsertag,
  getBlacklist,
  delBlacklist,
  editBlacklist,
  editRemarkName,
  addBatchBlacklist,
  delBatchBlacklist,
  addBlacklist,
  delSingleBlacklist
} from '@/api/visitor'
import qs from 'qs'
import { switchCase } from '@babel/types'

export default {
  components: {
    PushTagPop
  },

  data() {
    return {
      showPop: false,
      showDelPop: false, // 是否显示删除弹窗
      curIndex: 1, // 当前选项
      options: [],
      value: '全部',
      tableData: [],
      keywords: null,   // 搜索关键字
      tablePageTotal: 10,
      tableData2: [],
      tablePageTotal2: 10,
      multipleSelection: [],
      keywords: null
    }
  },
  created() {},
  mounted() {
    this.initData()
  },
  methods: {
    // search
    searchUser(){
      if(this.curIndex == 1){
        getVisitorserList(1, 10,null,this.keywords).then(res => {
          this.tableData = res.data.datas
          this.tableData.map(item => {
          item.vuFollowDate = utils.formatDate(item.vuFollowDate, 'yyyy-MM-dd hh:mm:ss',true)
        })
          this.tablePageTotal = res.data.totalCount
        })
      } else {
        getBlacklist(1,10,this.keywords).then(res => {
          this.tableData2 = res.data.datas
          this.tablePageTotal2 = res.data.totalCount
        })
      }
    },
    // 分页
    changePage1(e){
      this.getList(e)
    },
    changePage2(e){
      this.getBlackList(e)
    },
    changeTab(type) {
      this.curIndex = type
      this.multipleSelection = []
      this.keywords = null
      if (this.curIndex == 1) {
        this.getList()
        this.getTagList()
      } else if (this.curIndex == 2) {
        this.getBlackList()
      }
    },
    // 获取黑名单列表
    getBlackList(params="1") {
      getBlacklist( params, 10).then(res => {
        this.tableData2 = res.data.datas
        this.tablePageTotal2 = res.data.totalCount
      })
    },
    // 切换标签事件
    changeTag(val) {
      console.log(val)
      getVisitorserList(1, 10, val).then(res => {
        this.tableData = res.data.datas
        this.tableData.map(item => {
          item.vuFollowDate = utils.formatDate(item.vuFollowDate, 'yyyy-MM-dd hh:mm:ss',true)
        })
      })
    },
    // 移出黑名单
    removedBlacklist(type, scope) {
      let newList = []
      switch (type) {
        case 1:
          console.log(scope)
          let single = [scope.blacklistId]
          
          delBatchBlacklist(single).then(res => {
            this.$message({
              type: 'success',
              message: '已移除黑名单 '
            })
            this.getBlackList()
            this.keywords = null
          })
          
          break
        case 2:
          this.multipleSelection.map(item => {
            newList.push(item.blacklistId)
          })
          delBatchBlacklist(newList).then(res => {
            this.$message({
              type: 'success',
              message: '已移除黑名单 '
            })
            this.getBlackList()
          })
          break
        default:
          break
      }
    },
    //加入黑名单
    blacklist(type, scope = null) {
      // type  1. 单个加入黑名单   2.批量加入黑名单
      let newList = []
      switch (type) {
        case 1:
          let params = {
            userId: scope.visitorUserId,
            userType: '1'
          }
          
          addBatchBlacklist([params]).then(res => {
            this.$message({
              type: 'success',
              message: '已加入黑名单 '
            })
            this.getList()
            // this.getBlackList()
          })

          break
        case 2:
          if (this.multipleSelection.length == 0) {
            this.$message('请勾选需要操作的人员')
            return
          }
          this.multipleSelection.map(item => {
            let params = {
              userId: item.visitorUserId,
              userType: '1'
            }
            newList.push(params)
          })
          addBatchBlacklist(newList).then(res => {
            this.$message({
              type: 'success',
              message: '已加入黑名单 '
            })
            this.getList()
          })
          break
        default:
          break
      }
    },
    // 获取标签名,并修改标签
    onPushTag(tag) {
      let newList = []
      this.showPop = false
      this.multipleSelection.map(item => {
        return newList.push(item.visitorUserId)
      })
      updateVisitorser({ ids: newList, vuTagId: tag }).then(res => {
        this.getList()
      })
    },
    onAddTag(item) {
      this.showPop = false
      this.options.push(item)
      addUsertag(item).then(res => {
        
      })
    },
    // 打标签
    pushTag() {
      if (this.multipleSelection.length == 0) {
        this.$message('请勾选需要操作的人员')
        return
      }
      this.showPop = true
    },
    onClosePop() {
      this.showPop = false
    },
    getList(parmas=1) {
      getVisitorserList(parmas, 10).then(res => {
        this.tableData = res.data.datas
        this.tableData.map(item => {
          item.vuFollowDate = utils.formatDate(item.vuFollowDate, 'yyyy-MM-dd hh:mm:ss',true)
        })
        this.tablePageTotal = res.data.totalCount
      })
    },
    //获取签名列表
    getTagList() {
      getUsertag({ pageNo: 1, pageSize: 10 }).then(res => {
        this.options = res.data.datas
        let params = {
          utTagName: '全部',
          userTagId: null
        }
        this.options.unshift(params)
        this.options.map(item => {
          return (item.checked = false)
        })
      })
    },
    initData() {
      this.getList()
      // 获取用户标签列表
      this.getTagList()
    },
    // 添加
    addCategory() {
      this.$prompt('添加标签', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(({ value }) => {
          addUsertag({ utTagName: value }).then(res => {
            this.$message({
              type: 'success',
              message: '已添加标签: ' + value
            })
            this.getTagList()
          })
        })
        .catch(() => {
          
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
    },
    //删除
    del() {
      if (!this.value || this.value == '全部') {
        this.$message({
          type: 'success',
          message: '请选择标签!'
        })
        return
      }
      this.showDelPop = true
    },
    // 确认删除
    confirmDel() {
      const { multipleSelection,options, value, showDelPop, curIndex } = this
      
      delUsertag(value).then(res => {
        this.getTagList()
        this.getList()
      })
      showDelPop = false
    },

    // 重命名
    reName() {
    
      if (!this.value || this.value == '全部') {
        this.$message({
          type: 'success',
          message: '请选择标签!'
        })
        return
      }
      this.$prompt('重命名', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(({ value }) => {
          console.log('成功', value)
          updateUsertag({ userTagId: this.value, utTagName: value }).then(
            res => {
              this.options.map(item => {
                if(this.value == item.userTagId){
                  item.utTagName = value
                }
              })
              this.$message({
                type: 'success',
                message: '已修改标签为:' + value
              })
              
            }
          )
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
    },
    //  修改备注
    editRemark(scope) {
      
      console.log(scope,',.,.,..')
      this.$prompt('修改备注', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(({ value }) => {
          console.log('成功', value)
          let id ;
          console.log(this.curIndex,'index')
          if(this.curIndex == 1){
            id = scope.visitorUserId
          } else {
            id = scope.visitorUser.visitorUserId
          }
          editRemarkName({
            visitorUserId: id,
            vuRemarkName: value
          }).then(res => {
            this.$message({
              type: 'success',
              message: '已修改备注: ' + value
            })
            this.getBlackList()
            this.getList()
            
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>
<style lang="scss">
.header {
  height: 98px;
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  border-top: 1px solid #eee;
  color: rgba(0, 0, 0, 0.85);
  background-color: #fff;
  line-height: 98px;
  .title {
    padding: 0 0 0 53px;
    box-sizing: border-box;
  }
  .search {
    padding: 30px 30px 30px 0;
    height: 98px;
    box-sizing: border-box;
    text-align: right;
    .input {
      width: 430px;
      vertical-align: top;
      .search-btn {
        width: 70px;
        height: 40px;
        padding: 0;
        background: #015DFF;
        border-radius: 0px 4px 4px 0px;
        font-size: 16px;
        font-weight: 400;
        color: #fff;
        line-height: 40px;
        font-family: PingFangSC-Regular, PingFang SC;
        vertical-align: top;
      }
    }
  }
}
.nav-item-visitors {
  width: 114px;
  height: 54px;
  line-height: 54px;
  text-align: center;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  border-radius: 10px 10px 2px 2px;
}
.active-nav::after {
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translateX(-50%);
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: #015dff;
}
.active-nav {
  position: relative;
  color: #015dff;
  background: #ffffff;
  margin-top: 0px;
}

.tab-wrap {
  padding: 20px 30px;
  box-sizing: border-box;
}
.table-wrap {
  background-color: #fff;
  padding: 30px;
  box-sizing: border-box;
}
.popover-wrap {
  padding: 0;
}
.name-wrapper {
  width: 360px;
  background: #ffffff;
  border-radius: 8px;
  padding: 30px 30px 10px 30px;
  box-sizing: border-box;
}
.name-wrapper img {
  width: 80px;
  height: 80px;
}
.name-wrapper .title {
  margin-top: 12px;
}

.name-wrapper .info {
  margin-bottom: 6px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1b1b1b;
}
.card-footer {
  padding-top: 20px;
  border-top: 1px solid #e9e9e9;
}
</style>
